<template>
  <div class="ai-assistant-container">
    <div class="page-header">
      <h1><i class="fas fa-robot"></i> AI戒烟助手</h1>
      <p>您的专属戒烟顾问，24小时为您提供支持和指导</p>
    </div>

    <!-- 快速功能卡片 -->
    <div class="quick-features">
      <div class="feature-card" @click="startQuickConsult" :class="{ active: activeFeature === 'consult' }">
        <div class="feature-icon"><i class="fas fa-lightbulb"></i></div>
        <h3>快速咨询</h3>
        <p>获得即时戒烟建议</p>
      </div>
      
      <div class="feature-card" @click="startCravingHelp" :class="{ active: activeFeature === 'craving' }">
        <div class="feature-icon"><i class="fas fa-exclamation-triangle"></i></div>
        <h3>烟瘾应对</h3>
        <p>紧急烟瘾处理方案</p>
      </div>
      
      <div class="feature-card" @click="startMoodSupport" :class="{ active: activeFeature === 'mood' }">
        <div class="feature-icon"><i class="fas fa-heart"></i></div>
        <h3>情感支持</h3>
        <p>心理疏导和鼓励</p>
      </div>
      
      <div class="feature-card" @click="startHealthQA" :class="{ active: activeFeature === 'health' }">
        <div class="feature-icon"><i class="fas fa-book-medical"></i></div>
        <h3>健康问答</h3>
        <p>戒烟知识和健康咨询</p>
      </div>
    </div>

    <!-- 对话界面 -->
    <div class="chat-container">
      <div class="chat-header">
        <div class="ai-avatar"><i class="fas fa-robot"></i></div>
        <div class="ai-info">
          <h3>AI戒烟助手</h3>
          <span class="online-status"><i class="fas fa-circle"></i> 在线</span>
        </div>
        <div class="chat-actions">
          <button @click="clearChat" class="clear-btn" title="清空对话">
            <i class="fas fa-trash-alt"></i>
          </button>
          <button @click="exportChat" class="export-btn" title="导出对话">
            <i class="fas fa-file-export"></i>
          </button>
        </div>
      </div>

      <div class="chat-messages" ref="chatMessages">
        <!-- 欢迎消息 -->
        <div v-if="messages.length === 0" class="welcome-message">
          <div class="ai-avatar"><i class="fas fa-robot"></i></div>
          <div class="message-content">
            <h4>您好！我是您的AI戒烟助手</h4>
            <p>我可以帮助您：</p>
            <ul>
              <li><i class="fas fa-bullseye"></i> 制定个性化戒烟计划</li>
              <li><i class="fas fa-smoking-ban"></i> 应对烟瘾和压力</li>
              <li><i class="fas fa-fist-raised"></i> 提供动机支持和鼓励</li>
              <li><i class="fas fa-chart-line"></i> 分析您的戒烟进展</li>
              <li><i class="fas fa-hospital"></i> 解答健康相关问题</li>
            </ul>
            <p>请选择上方的功能卡片或直接向我提问！</p>
          </div>
        </div>

        <!-- 对话消息 -->
        <div 
          v-for="(message, index) in messages" 
          :key="index" 
          :class="['message', message.type]"
        >
          <div v-if="message.type === 'ai'" class="ai-avatar"><i class="fas fa-robot"></i></div>
          <div class="message-content">
            <div class="message-text" v-html="formatMessage(message.content)"></div>
            <div class="message-time">{{ formatTime(message.timestamp) }}</div>
            
            <!-- AI消息的操作按钮 -->
            <div v-if="message.type === 'ai'" class="message-actions">
              <button @click="likeMessage(index)" :class="['action-btn', { liked: message.liked }]">
                <i class="fas fa-thumbs-up"></i>
              </button>
              <button @click="copyMessage(message.content)" class="action-btn">
                <i class="fas fa-clipboard"></i>
              </button>
            </div>
          </div>
          <div v-if="message.type === 'user'" class="user-avatar"><i class="fas fa-user"></i></div>
        </div>

        <!-- 加载状态 -->
        <div v-if="isLoading" class="message ai">
          <div class="ai-avatar"><i class="fas fa-robot"></i></div>
          <div class="message-content">
            <div class="typing-indicator">
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
        </div>
      </div>

      <!-- 输入区域 -->
      <div class="chat-input">
        <div class="input-toolbar">
          <!-- 快捷问题 -->
          <div class="quick-questions">
            <button 
              v-for="question in quickQuestions" 
              :key="question"
              @click="sendQuickQuestion(question)"
              class="quick-question-btn"
            >
              {{ question }}
            </button>
          </div>
        </div>
        
        <div class="input-area">
          <textarea
            v-model="currentMessage"
            @keydown.enter.prevent="sendMessage"
            @input="adjustTextareaHeight"
            placeholder="请输入您想咨询的问题..."
            class="message-input"
            ref="messageInput"
            :disabled="isLoading"
          ></textarea>
          
          <div class="input-actions">
            <button @click="toggleVoiceInput" class="voice-btn" :class="{ active: isListening }">
              <i class="fas fa-microphone"></i>
            </button>
            <button @click="sendMessage" class="send-btn" :disabled="!currentMessage.trim() || isLoading">
              发送
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 历史记录侧边栏 -->
    <div class="history-sidebar" :class="{ open: showHistory }">
      <div class="sidebar-header">
        <h3>对话历史</h3>
        <button @click="toggleHistory" class="close-btn">×</button>
      </div>
      
      <div class="history-list">
        <div 
          v-for="session in chatHistory" 
          :key="session.id"
          @click="loadChatSession(session)"
          class="history-item"
        >
          <div class="session-title">{{ session.title }}</div>
          <div class="session-time">{{ formatDate(session.created_at) }}</div>
          <div class="session-preview">{{ session.preview }}</div>
        </div>
      </div>
    </div>

    <!-- 历史记录按钮 -->
    <button @click="toggleHistory" class="history-toggle-btn" title="对话历史">
      <i class="fas fa-history"></i>
    </button>
  </div>
</template>

<script>
import { aiAssistantApi } from '../api/index.js'

export default {
  name: 'AIAssistantView',
  data() {
    return {
      messages: [],
      currentMessage: '',
      isLoading: false,
      isListening: false,
      activeFeature: '',
      showHistory: false,
      chatHistory: [],
      quickQuestions: [
        '我刚开始戒烟，有什么建议？',
        '烟瘾很强怎么办？',
        '戒烟多久身体会恢复？',
        '戒烟后体重增加正常吗？',
        '如何避免复吸？'
      ]
    }
  },

  mounted() {
    this.loadChatHistory()
    this.initializeWelcome()
  },

  methods: {
    initializeWelcome() {
      // 初始化欢迎状态
      this.scrollToBottom()
    },

    async sendMessage() {
      if (!this.currentMessage.trim() || this.isLoading) return

      const userMessage = {
        type: 'user',
        content: this.currentMessage.trim(),
        timestamp: new Date()
      }

      this.messages.push(userMessage)
      const messageToSend = this.currentMessage.trim()
      this.currentMessage = ''
      this.adjustTextareaHeight()
      
      await this.$nextTick()
      this.scrollToBottom()

      try {
        this.isLoading = true
        
        // 调用AI助手API
        const response = await aiAssistantApi.sendMessage({
          message: messageToSend,
          context: this.getConversationContext(),
          feature: this.activeFeature
        })

        const aiMessage = {
          type: 'ai',
          content: response.message,
          timestamp: new Date(),
          liked: false
        }

        this.messages.push(aiMessage)
        
        // 保存对话到历史
        await this.saveChatMessage(userMessage, aiMessage)
        
      } catch (error) {
        console.error('AI助手响应失败:', error)
        
        const errorMessage = {
          type: 'ai',
          content: '抱歉，我现在有点忙，请稍后再试。如果问题紧急，您可以查看健康建议页面获取帮助。',
          timestamp: new Date(),
          liked: false
        }
        
        this.messages.push(errorMessage)
      } finally {
        this.isLoading = false
        await this.$nextTick()
        this.scrollToBottom()
      }
    },

    sendQuickQuestion(question) {
      this.currentMessage = question
      this.sendMessage()
    },

    startQuickConsult() {
      this.activeFeature = 'consult'
      this.sendQuickQuestion('我需要戒烟咨询和建议')
    },

    startCravingHelp() {
      this.activeFeature = 'craving'
      this.sendQuickQuestion('我现在烟瘾很强，请帮助我')
    },

    startMoodSupport() {
      this.activeFeature = 'mood'
      this.sendQuickQuestion('我需要情感支持和鼓励')
    },

    startHealthQA() {
      this.activeFeature = 'health'
      this.sendQuickQuestion('我想了解戒烟相关的健康知识')
    },

    getConversationContext() {
      // 获取最近几条对话作为上下文
      return this.messages.slice(-6).map(msg => ({
        type: msg.type,
        content: msg.content
      }))
    },

    async saveChatMessage(userMessage, aiMessage) {
      try {
        await aiAssistantApi.saveChatMessage({
          user_message: userMessage.content,
          ai_response: aiMessage.content,
          feature: this.activeFeature
        })
      } catch (error) {
        console.error('保存对话失败:', error)
      }
    },

    async loadChatHistory() {
      try {
        const response = await aiAssistantApi.getChatHistory()
        this.chatHistory = response.results || []
      } catch (error) {
        console.error('加载对话历史失败:', error)
        this.chatHistory = []
      }
    },

    async loadChatSession(session) {
      try {
        const response = await aiAssistantApi.getChatSession(session.id)
        this.messages = response.messages || []
        this.showHistory = false
        await this.$nextTick()
        this.scrollToBottom()
      } catch (error) {
        console.error('加载对话会话失败:', error)
      }
    },

    clearChat() {
      if (confirm('确定要清空当前对话吗？')) {
        this.messages = []
        this.activeFeature = ''
      }
    },

    async exportChat() {
      const chatContent = this.messages.map(msg => 
        `[${this.formatTime(msg.timestamp)}] ${msg.type === 'user' ? '您' : 'AI助手'}: ${msg.content}`
      ).join('\n\n')
      
      const blob = new Blob([chatContent], { type: 'text/plain;charset=utf-8' })
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = `AI助手对话记录_${new Date().toISOString().split('T')[0]}.txt`
      a.click()
      URL.revokeObjectURL(url)
    },

    likeMessage(index) {
      this.messages[index].liked = !this.messages[index].liked
    },

    copyMessage(content) {
      navigator.clipboard.writeText(content).then(() => {
        // 可以添加复制成功的提示
      })
    },

    toggleHistory() {
      this.showHistory = !this.showHistory
    },

    toggleVoiceInput() {
      // 语音输入功能（需要浏览器支持）
      if (!this.isListening) {
        // 开始语音识别
        this.isListening = true
        // 实现语音识别逻辑
      } else {
        // 停止语音识别
        this.isListening = false
      }
    },

    adjustTextareaHeight() {
      const textarea = this.$refs.messageInput
      if (textarea) {
        textarea.style.height = 'auto'
        textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px'
      }
    },

    scrollToBottom() {
      const chatMessages = this.$refs.chatMessages
      if (chatMessages) {
        chatMessages.scrollTop = chatMessages.scrollHeight
      }
    },

    formatMessage(content) {
      // 格式化消息内容，支持简单的markdown
      return content
        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
        .replace(/\*(.*?)\*/g, '<em>$1</em>')
        .replace(/\n/g, '<br>')
    },

    formatTime(timestamp) {
      return new Date(timestamp).toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit'
      })
    },

    formatDate(timestamp) {
      return new Date(timestamp).toLocaleDateString('zh-CN', {
        month: 'short',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
      })
    }
  }
}
</script>

<style scoped>
.ai-assistant-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: linear-gradient(135deg, #faf0ff 0%, #f0f9ff 100%);
  position: relative;
  overflow: hidden;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

/* 背景装饰元素 */
.ai-assistant-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(255, 198, 255, 0.2) 3px, transparent 3px),
    radial-gradient(circle at 90% 40%, rgba(180, 248, 200, 0.2) 2px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(255, 209, 220, 0.2) 4px, transparent 4px),
    radial-gradient(circle at 70% 15%, rgba(162, 210, 255, 0.2) 3px, transparent 3px),
    radial-gradient(circle at 20% 70%, rgba(255, 175, 204, 0.2) 2px, transparent 2px),
    radial-gradient(circle at 85% 25%, rgba(255, 209, 220, 0.2) 3px, transparent 3px);
  background-size: 200px 200px;
  z-index: 0;
}

.ai-assistant-container > * {
  position: relative;
  z-index: 1;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
  z-index: 2;
  animation: slideInDown 0.8s ease-out;
}

.page-header h1 {
  color: #444444;
  margin-bottom: 10px;
  font-size: 28px;
  font-weight: 500;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.page-header p {
  color: #888888;
  font-size: 16px;
  font-weight: 400;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.quick-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
  position: relative;
  z-index: 2;
  animation: slideInUp 0.8s ease-out;
}

.feature-card {
  background: white;
  border: 2px dashed #CDB4DB;
  border-radius: 20px;
  padding: 25px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 2;
  animation: slideInUp 0.8s ease-out;
}

.feature-card:hover {
  transform: translateY(-5px) scale(1.02);
  border: 2px solid #FFD1DC;
  box-shadow: 0 8px 25px rgba(255, 209, 220, 0.3);
}

.feature-card.active {
  border-color: #FFD1DC;
  background: linear-gradient(145deg, #fff5f5, #ffffff);
}

.feature-icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.feature-card h3 {
  color: #444444;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 500;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.feature-card p {
  color: #888888;
  font-size: 14px;
  margin: 0;
  font-weight: 300;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.chat-container {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border: 2px solid #A2D2FF;
  overflow: hidden;
  height: 600px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  animation: slideInUp 0.8s ease-out;
  animation-delay: 0.2s;
}

.chat-header {
  background: linear-gradient(135deg, #FFD1DC 0%, #A2D2FF 100%);
  color: white;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.ai-avatar {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.ai-info {
  flex: 1;
}

.ai-info h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.online-status {
  font-size: 12px;
  opacity: 0.9;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.chat-actions {
  display: flex;
  gap: 10px;
}

.clear-btn, .export-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.clear-btn:hover, .export-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #f8f9fa;
  position: relative;
  z-index: 2;
}

.welcome-message {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  animation: slideInUp 0.6s ease-out;
}

.welcome-message .ai-avatar {
  background: #A2D2FF;
  color: white;
  min-width: 40px;
  border: 2px solid #A2D2FF;
}

.welcome-message .message-content {
  background: white;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 2px solid #B4F8C8;
  flex: 1;
}

.welcome-message h4 {
  margin: 0 0 10px 0;
  color: #444444;
  font-weight: 500;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.welcome-message ul {
  margin: 10px 0;
  padding-left: 20px;
}

.welcome-message li {
  margin: 5px 0;
  color: #666666;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.message {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  animation: slideInUp 0.3s ease-out;
}

.message.user {
  flex-direction: row-reverse;
}

.message.user .message-content {
  background: #A2D2FF;
  color: white;
  border-radius: 20px 20px 5px 20px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.message.ai .message-content {
  background: white;
  border: 2px solid #B4F8C8;
  border-radius: 20px 20px 20px 5px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.user-avatar {
  width: 40px;
  height: 40px;
  background: #28a745;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  min-width: 40px;
  border: 2px solid #28a745;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.message-content {
  max-width: 70%;
  padding: 12px 16px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.message-text {
  line-height: 1.5;
  word-wrap: break-word;
  font-weight: 400;
}

.message-time {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 5px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.message-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.action-btn {
  background: none;
  border: 1px solid #e0e0e0;
  padding: 4px 8px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s ease;
}

.action-btn:hover {
  background: #f0f0f0;
  transform: scale(1.1);
}

.action-btn.liked {
  background: #ffd700;
  border-color: #ffd700;
}

.typing-indicator {
  display: flex;
  gap: 4px;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background: #A2D2FF;
  border-radius: 50%;
  animation: typing 1.4s infinite;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.3;
  }
  30% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

.chat-input {
  border-top: 1px solid #e0e0e0;
  background: white;
  position: relative;
  z-index: 2;
}

.input-toolbar {
  padding: 10px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.quick-questions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.quick-question-btn {
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  padding: 6px 12px;
  border-radius: 15px;
  cursor: pointer;
  font-size: 12px;
  color: #666;
  transition: all 0.2s ease;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.quick-question-btn:hover {
  background: linear-gradient(135deg, #FFD1DC 0%, #A2D2FF 100%);
  color: white;
  border-color: #A2D2FF;
}

.input-area {
  display: flex;
  padding: 15px 20px;
  gap: 15px;
  align-items: flex-end;
  position: relative;
}

.message-input {
  flex: 1;
  border: 1px solid #A2D2FF;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.4;
  resize: none;
  min-height: 40px;
  max-height: 120px;
  outline: none;
  position: relative;
  z-index: 2;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.message-input:focus {
  border-color: #FFD1DC;
  box-shadow: 0 0 0 2px rgba(255, 209, 220, 0.3);
}

.input-actions {
  display: flex;
  gap: 10px;
}

.voice-btn {
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  padding: 10px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.voice-btn.active {
  background: #ff4757;
  color: white;
  border-color: #ff4757;
}

.send-btn {
  background: linear-gradient(135deg, #FFD1DC 0%, #A2D2FF 100%);
  color: white;
  border: none;
  padding: 10px 25px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 500;
  box-shadow: 0 4px 10px rgba(162, 210, 255, 0.3);
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  transition: all 0.3s ease;
}

.send-btn:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(162, 210, 255, 0.4);
}

.send-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.history-sidebar {
  position: fixed;
  top: 0;
  right: -350px;
  width: 350px;
  height: 100vh;
  background: white;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  transition: right 0.3s ease;
  z-index: 1000;
  border-left: 2px solid #A2D2FF;
}

.history-sidebar.open {
  right: 0;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #f0f9ff 0%, #faf0ff 100%);
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: #f0f0f0;
  transform: rotate(90deg);
}

.history-list {
  padding: 20px;
  height: calc(100vh - 80px);
  overflow-y: auto;
}

.history-item {
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.history-item:hover {
  border-color: #A2D2FF;
  background: #f8f9fa;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(162, 210, 255, 0.2);
}

.session-title {
  font-weight: 500;
  margin-bottom: 5px;
  color: #444444;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.session-time {
  font-size: 12px;
  color: #888888;
  margin-bottom: 5px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.session-preview {
  font-size: 13px;
  color: #999;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.history-toggle-btn {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  background: linear-gradient(135deg, #FFD1DC 0%, #A2D2FF 100%);
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  box-shadow: 0 4px 15px rgba(162, 210, 255, 0.4);
  z-index: 999;
  transition: all 0.3s ease;
}

.history-toggle-btn:hover {
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 20px rgba(162, 210, 255, 0.6);
}

/* 动画效果 */
@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 768px) {
  .ai-assistant-container {
    padding: 15px;
    background: linear-gradient(135deg, #faf0ff 0%, #f0f9ff 100%);
    background-size: 100% 100%, 100% 50%;
    background-position: 0 0, center bottom;
    background-repeat: no-repeat, no-repeat;
  }
  
  .quick-features {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .chat-container {
    height: 500px;
  }
  
  .message-content {
    max-width: 85%;
  }
  
  .quick-questions {
    justify-content: center;
  }
  
  .history-sidebar {
    width: 100%;
    right: -100%;
  }
}
</style>